<template>
	<view class="ercode-body">
		<!-- <image src="/static/img/jinruye.png" mode="" class="bg"></image>
		<image :src="shareCodeUrl" mode="" class="ercode"></image> -->
		<u-button type="success" class="save" @click="saveImage">保存图片</u-button>
		<l-painter :board="base" ref="painter" v-if="!show_poster"/>
		
		<!-- 生成的图片 -->
		<uni-popup type="center" ref="posterImg" :maskClick="false"
			style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;">
			<view class="poster-img" style="position: relative;">
				<image :src="shareCodeUrl" mode="" @click="previewImg"></image>
				<!-- #ifdef H5 -->
				<view class="">
					长按图片保存到手机
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="">
					点击图片放大查看，并长按图片保存到手机
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/'
	export default {
		components: {lPainter},
		data() {
			return {
				mainid : "",
				phone: "",
				show_poster: false,
				shareCodeUrl : "",
				base: {
				    width: '750rpx',
					height: '1350rpx',
					views: []
				}
			};
		},
		onLoad() {
			this.getOpenid();
		},
		methods:{
			previewImg() {
				uni.previewImage({
					current: this.shareCodeUrl,
					urls: [this.shareCodeUrl]
				});
			},
			saveImage() {
			    
				const painter = this.$refs.painter;
				painter.canvasToTempFilePath().then(res => {
					console.log(res);
					this.shareCodeUrl = res.tempFilePath;
					// this.$refs.posterImg.open();
					// this.show_poster = true;
					this.previewImg();
				});
			},
			getOpenid() {
				var that = this;
				uni.getStorage({
					key: 'user',
					success: function(res) {
						console.log("res",res);
						that.mainid = res.data.id;
						that.phone = res.data.nickName;
						// that.mainid = "1519585814305316866";
						that.getShareCode();
					}
				});
			},
			getShareCode() {
				console.log("getMyInfo: " + this.mainid);
				uni.request({
					header: {
						userId: this.mainid
					},
					url: getApp().globalData.mallHost + '/p/user/getTjCode', 
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res);
						// this.shareCodeUrl = res.data;
						this.base = {
							width: '750rpx',
							height: '1350rpx',
							views: [
								{
									type: 'image',
									src: '/static/img/jinruye.png',
									mode: 'widthFix',
									css: {
									    left: '75rpx',
									    top: '0rpx',
									    width: '600rpx',
										height: '933rpx',
									}
								},
								{
									type: 'image',
									src: res.data,
									mode: '',
									css: {
										left: '275rpx',
										top: '660rpx',
										width: '200rpx',
										height: '200rpx',
									}
							   },
							]
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			saveImg(){
				uni.downloadFile({
					url: this.shareCodeUrl, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功',res);
							uni.saveImageToPhotosAlbum({
								filePath : res.tempFilePath,
								success: ((res) => {
									this.$u.toast("已保存到相册");
								})
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'style.scss';
	.ercode-body{
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 88rpx);
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		position: relative;
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
	}
	.ercode{
		width: 260rpx;
		height: 260rpx;
		position: absolute;
		bottom: 150rpx;
		left: 245rpx;
		z-index: 9;
	}
	.save{
		width: 60%;
		position: fixed;
		bottom: 20rpx;
		left: 20%;
	}
</style>
